<template>
  <div>
    <Row>
      <Card shadow>
        <div ref="dom" v-if="showChartpie" style="height: 310px"></div>
      </Card>
    </Row>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { on, off } from "@/libs/tools";
import InforCard from "_c/info-card";
import CountTo from "_c/count-to";
import { ChartPie, ChartBar } from "_c/charts";
import { getWeightData } from "@/api/content/health/weight.js";
export default {
  name: "home",
  components: {
    InforCard,
    CountTo,
    ChartPie,
    ChartBar,
  },
  data() {
    return {
      dom: null,
      weightData: [],
      showChartpie: false,
    };
  },
  methods: {
    resize() {
      this.dom.resize();
    },
    //可以将数字转换成中文大写的表示，处理到万级别，例如 toChineseNum(12345)，返回 一万二千三百四十五。
    toChinesNum(num) {
      let changeNum = [
        "零",
        "一",
        "二",
        "三",
        "四",
        "五",
        "六",
        "七",
        "八",
        "九",
      ]; //changeNum[0] = "零"
      let unit = ["", "十", "百", "千", "万"];
      num = parseInt(num);
      let getWan = (temp) => {
        let strArr = temp.toString().split("").reverse();
        let newNum = "";
        for (var i = 0; i < strArr.length; i++) {
          newNum =
            (i == 0 && strArr[i] == 0
              ? ""
              : i > 0 && strArr[i] == 0 && strArr[i - 1] == 0
              ? ""
              : changeNum[strArr[i]] + (strArr[i] == 0 ? unit[0] : unit[i])) +
            newNum;
        }
        return newNum;
      };
      let overWan = Math.floor(num / 10000);
      let noWan = num % 10000;
      if (noWan.toString().length < 4) noWan = "0" + noWan;
      return overWan ? getWan(overWan) + "万" + getWan(noWan) : getWan(num);
    },
    getData() {
      getWeightData().then((res) => {
        if (res.data.code == 0) {
          this.weightData = res.data.data;
          const dateObj = new Date();
          let nowYear = dateObj.getFullYear(),
            nowMonth = dateObj.getMonth() + 1,
            nowDay = dateObj.getDate();

          //折线统计图
          let option = {
            title: {
              text: this.toChinesNum(nowMonth) + "月每日体重折线统计图",
              subtext: "",
              x: "center",
              textStyle: {
                color: "#516b91",
              },
            },
            //鼠标放上去的提示
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
                label: {
                  backgroundColor: "#6a7985",
                },
              },
            },
            //定位布局
            grid: {
              top: "20%",
              left: "1.2%",
              right: "1%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: [
              {
                type: "category",
                boundaryGap: false,
                data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
              },
            ],
            yAxis: [
              {
                type: "value",
              },
            ],
            series: [
              {
                name: "体重",
                type: "line",
                stack: "总量",
                label: {
                  normal: {
                    show: true,
                    position: "top",
                    fontSize: 10,
                  },
                },
                areaStyle: {
                  normal: {
                    color: "#398DBF",
                  },
                },
                data: [],
              },
            ],
          };
          const showCount = dateObj.getDate();
          let newData = this.weightData.filter((item) => {
            let day = parseInt(item.date.charAt(8) + item.date.charAt(9));
            return (
              item.date.indexOf(nowYear) != -1 &&
              day > nowDay - showCount &&
              day <= nowDay
            );
          });
          let weightArr = [],
            dayArr = [];
          for (let index = 0; index < showCount; index++) {
            let itemData = newData.filter((data) => {
              let day = parseInt(data.date.charAt(8) + data.date.charAt(9));
              let month = parseInt(data.date.charAt(5) + data.date.charAt(6));
              return (
                data.date.indexOf(nowYear) !== -1 &&
                day == nowDay - index &&
                month == nowMonth
              );
            });
            let historyDay = nowDay - index;
            let num = [];

            // for (let i = 0, len = itemData.length; i < len; i++) {
            //   // num += parseFloat(itemData[i].weight);
            //   nameArr.push(itemData[i].name);
            // }
            // nameArr = Array.from(new Set(nameArr));

            // for (let j = 0; j < nameArr.length; j++) {
            //   for (let i = 0, len = itemData.length; i < len; i++) {
            //     if (itemData[i].name == nameArr[j]) {
            //       num[j].push(parseFloat(itemData[i].weight));
            //     }
            //   }
            // }
            for (let i = 0, len = itemData.length; i < len; i++) {
              num += parseFloat(itemData[i].weight);
            }
            dayArr.unshift(nowMonth + "月" + historyDay + "日");
            weightArr.unshift(num);
          }
          option.series[0].data = weightArr;
          option.xAxis[0].data = dayArr;

          // option.series[0].data = weightArr;
          // option.xAxis[0].data = dayArr;
          this.showChartpie = true;
          this.$nextTick(() => {
            this.dom = echarts.init(this.$refs.dom);
            this.dom.setOption(option);
            on(window, "resize", this.resize);
          });
        } else if (res.data.code == 1010) {
          this.$router.push("/login");
          this.$Message.warning("您的登录状态已失效，请您重新登录.");
        } else {
          this.$Message.error("出错了，错误原因：" + res.data.msg);
        }
      });
    },
  },
  created() {
    this.getData();
  },
  mounted() {},
  beforeDestroy() {
    off(window, "resize", this.resize);
  },
};
</script>

<style lang="less" scope>
.count-style {
  font-size: 50px;
}
.zhu {
  color: #a2a2a2;
  font-size: 14px;
}
.ivu-card-body {
  padding: 10px 20px;
}
</style>
